<template>
  <div id="app">
    <div class="pdf-preview">
      <van-nav-bar :title="$t('detail.pdf.preview')" left-arrow @click-left="onBack" />
    </div>
    <div id="demo"></div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Pdfh5 from 'pdfh5';

const router = useRouter();
const route = useRoute();
let pdfh5Instance = null;

// 预加载中文字体支持
const preloadChineseFonts = () => {
  return new Promise((resolve) => {
    // 创建一个隐藏的div来预加载字体
    const testDiv = document.createElement('div');
    testDiv.style.fontFamily = 'PMingLiU, Microsoft JhengHei, Microsoft YaHei, SimSun, sans-serif';
    testDiv.style.position = 'absolute';
    testDiv.style.visibility = 'hidden';
    testDiv.style.fontSize = '12px';
    testDiv.textContent = '测试中文字体显示';
    document.body.appendChild(testDiv);

    // 等待一帧确保字体开始加载
    setTimeout(() => {
      document.body.removeChild(testDiv);
      resolve();
    }, 100);
  });
};

const onBack = () => {
  router.back();
};

onMounted(async () => {
  // 预加载字体
  await preloadChineseFonts();

  const url = route.query.url;
  const pdfUrl = url && url.startsWith('http') ? url : `https://${url}`;

  console.info(`PDF URL: ${pdfUrl}`);

  // 更详细的配置
  pdfh5Instance = new Pdfh5(document.querySelector('#demo'), {
    pdfurl: pdfUrl,
    // PDF.js 配置选项
    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/',
    cMapPacked: true,
    disableFontFace: false,
    useSystemFonts: true,
    textLayerMode: 1, // 启用文本层
    renderer: 'canvas',
    // 缩放配置
    zoom: 100,
    zoomMax: 300,
    zoomMin: 50,
    // 页面配置
    page: 1,
    // 工具栏配置
    toolbar: true,
  });

  pdfh5Instance.on('complete', (status, msg, time, totalNum) => {
    console.log(`状态：${status}，信息：${msg}，耗时：${time} 毫秒，总页数：${totalNum}`);
    if (pdfh5Instance) {
      pdfh5Instance.zoomEnable(false);
    }
  });

  pdfh5Instance.on('error', (error) => {
    console.error('PDF加载错误:', error);
    // 错误时尝试重新加载
    console.log('尝试使用不同的配置重新加载...');
  });
});

onBeforeUnmount(() => {
  if (pdfh5Instance) {
    if (typeof pdfh5Instance.destroy === 'function') {
      pdfh5Instance.destroy();
    }
  }
});
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PMingLiU',
    'Microsoft JhengHei', 'Microsoft YaHei', 'SimSun', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}

#demo {
  width: 100%;
  height: calc(100vh - 46px);
  overflow: auto;
  background: #f5f5f5;
}

/* 强制字体回退 */
.pdfViewer .textLayer,
.pdfViewer .page,
.pdfViewer * {
  font-family: 'PMingLiU', 'Microsoft JhengHei', 'Microsoft YaHei', 'SimSun', 'Noto Sans CJK SC', sans-serif !important;
}

/* 确保文本层可见 */
.textLayer {
  opacity: 0.8 !important;
}
</style>
